<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('角色管理')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>角色管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table" id="roleTable" lay-filter="role_table_filter"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolBarRole">
    <div class="layui-card-header">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除
        </button>
        <button id="btnAddRole" class="layui-btn" lay-event="addRole"><i class="layui-icon"></i>添加</button>
    </div>
</script>
<script type="text/html" id="barRole">
    <div>
        <a class="layui-btn layui-btn-xs layui-icon" lay-event="roleEdit">&#xe642;编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-warm layui-icon" lay-event="roleData">&#xe631;数据权限</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal layui-icon" lay-event="roleChose">&#xe66f;分配用户</a>
        <a class="layui-btn layui-btn-danger layui-icon" lay-event="roleDel">&#x1006;删除</a>
    </div>
</script>
</body>
<th:block th:include="include :: dtree_js"/>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<script>
    layui.use(['laydate', 'form', 'table'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

      var roleTable=  table.render({
            elem: '#roleTable',
            url: ctx + 'system/role/rolelist',
            method: 'post',
            page: {
                groups: 3,
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            },
            toolbar: '#toolBarRole',
            defaultToolbar: ['filter', 'print'],
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'roleId', title: '角色编号'}
                    , {field: 'roleName', title: '角色名称'}
                    , {field: 'roleKey', title: '权限字符串'}
                    , {field: 'roleSort', title: '显示顺序'}
                    , {field: 'status', title: '角色状态'}
                    , {
                    field: 'createTime',
                    width: 200,
                    title: '创建时间',
                    sort: true,
                    templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'
                }
                    , {fixed: 'right', width: 350, align: 'center', toolbar: '#barRole'}
                ]
            ],
            parseData: function (res) {
                return {
                    "code": res.code,
                    "count": res.total,
                    "data": res.rows,
                }

            },
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            done: function (res, curr, count) {
                //设置表格样式

                $(".layui-table").css({
                    "border": "1px solid #e2e2e2",
                    "border-top": "none",
                    "width": "100%"
                });
                $("thead").css("border-top", "1px solid #e2e2e2");
            },
        });


        table.on('toolbar(role_table_filter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch (obj.event) {
                case 'delAll':
                    delAll(data);
                    break;
                case 'addRole':
                    addRole(data);
                    break;
            }

        })


        function addRole(obj) {

            layer.open({
                type: 2,
                area: ['600px', '540px'],
                fixed: false,
                maxmin: true,
                shadeClose: true,
                shade: 0.4,
                title: '添加角色',
                content: ctx + "system/role/addRole",
            });
        }


        function delAll(data) {

            if (data.length == 0) {
                layer.msg("请选择要删除的数据行",{icon: 3})
            } else {

                var roleIds=[];
                layer.confirm('确认要删除选中的 '+data.length+' 行数据吗？' , function (index) {
                    //捉到所有被选中的，发异步进行删除
                    // layer.msg('删除成功', {icon: 1});
                    // $(".layui-form-checked").not('.header').parents('tr').remove();
                    data.forEach(function (_data) {
                        roleIds.push(_data.roleId);
                    })

                    $.ajax({
                        url: ctx +'system/role/delRoles',
                        type: 'POST',
                        data: {roles: roleIds.join()},
                        success:function (res) {
                            if(res.code==0)
                            {
                                layer.msg(res.msg, {icon: 1});
                            }else
                            {
                                layer.msg(res.msg, {icon: 5});
                            }
                        },
                        error:function (err) {

                        }
                    });


                    roleTable.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                });
            }

        }


        //监听行工具事件
        table.on('tool(role_table_filter)', function (obj) {
            var _data = obj.data;
            switch (obj.event) {

                case 'roleEdit' :
                    roleEdit(_data);
                    break;
                case 'roleData' :
                    roleData(_data);
                    break;
                case 'roleChose':
                    roleChose(_data);
                    break;
                case 'roleDel':
                    roleDel(_data);
                    break;
            }

        });


        function roleEdit(_data) {

            // layer.msg("编辑功能被调！！")
            layer.open({
                type: 2,
                area: ['600px', '540px'],
                fixed: false,
                maxmin: true,
                shadeClose: true,
                shade: 0.4,
                title: '角色编辑',
                content: ctx + "system/role/edit?roleId=" + _data.roleId,
            });
        }

        function roleData(_data) {

            layer.msg("编辑功能被调！！")
        }

        function roleChose(_data) {

            layer.msg("编辑功能被调！！")
        }

        function roleDel(_data) {
            var roleId=_data.roleId;
            var roleName=_data.roleName;
            layer.confirm("确定要删除角色："+roleName+"吗？",function () {

                $.ajax({
                    url: ctx +'system/role/delRoles',
                    type: 'POST',
                    data: {roles: roleId},
                    success:function (res) {
                        if(res.code==0)
                        {
                            layer.msg(res.msg, {icon: 1});
                        }else
                        {
                            layer.msg(res.msg, {icon: 5});
                        }
                    },
                    error:function (err) {

                    }
                });
                roleTable.reload();
            })
        }


    });


    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {

            if ($(obj).attr('title') == '启用') {

                //发异步把用户状态进行更改
                $(obj).attr('title', '停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!', {icon: 5, time: 1000});

            } else {
                $(obj).attr('title', '启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!', {icon: 5, time: 1000});
            }

        });
    }

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }


</script>
</html>